<template>
    <view class="completion-section">
        <u-icon name="checkmark-circle" color="#FF9FB5" size="60"></u-icon>
        <text class="text-2xl font-bold text-center block my-3">设置完成！</text>
        <text class="text-base text-content text-center block mb-6">
            感谢您完成基础设置，现在开始使用孕育宝典来记录您的孕育之旅吧！
        </text>

        <view class="summary-box">
            <text class="summary-title">您的设置摘要：</text>
            <view class="summary-content">
                <view class="summary-item" v-if="selectedOption === 'preparing'">
                    <text class="summary-line">• 阶段：备孕阶段</text>
                    <text class="summary-line"
                        >• 上次经期：{{ formatDate(formData.lastPeriodDate) }}
                    </text>
                    <text class="summary-line"
                        >• 经期天数：{{ formData.periodDuration }}天
                    </text>
                    <text class="summary-line"
                        >• 月经周期：{{ formData.cycleDuration }}天
                    </text>
                    <text class="summary-note"
                        >我们已为您计算好排卵日期和最佳受孕时间
                    </text>
                </view>

                <view class="summary-item" v-if="selectedOption === 'pregnant'">
                    <text class="summary-line">• 阶段：孕期阶段</text>
                    <text class="summary-line"
                        >• 末次月经：{{ formatDate(formData.lastMenstrualPeriod) }}
                    </text>
                    <text class="summary-line"
                        >• 当前孕周：{{ pregnancyWeeks }}周{{ pregnancyDays }}天
                    </text>
                    <text class="summary-line"
                        >• 预产期：{{ formatDate(calculatedDueDate) }}
                    </text>
                    <text class="summary-note">我们已为您准备了适合当前孕周的内容</text>
                </view>

                <view class="summary-item" v-if="selectedOption === 'postpartum'">
                    <text class="summary-line">• 阶段：产后阶段</text>
                    <text v-if="formData.birthDate" class="summary-line"
                        >• 宝宝出生日期：{{ formatDate(formData.birthDate) }}
                    </text>
                    <text v-if="formData.birthDate" class="summary-line"
                        >• 宝宝月龄：{{ babyMonths }}个月{{ babyDays }}天
                    </text>
                    <text class="summary-note"
                        >我们已为您准备了产后恢复和婴儿护理内容
                    </text>
                </view>
            </view>
        </view>

        <button class="custom-button" @click="enterHome">进入首页</button>
    </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import dayjs from 'dayjs'

// 定义props
const props = defineProps({
    selectedOption: {
        type: String,
        required: true
    },
    formData: {
        type: Object,
        required: true
    }
})

// 定义emit
const emit = defineEmits(['enter-home'])

// 计算属性
// 计算孕周
const pregnancyWeeks = computed<number>(() => {
    if (!props.formData.lastMenstrualPeriod) return 0

    const lmpDate = dayjs(props.formData.lastMenstrualPeriod)
    const todayDate = dayjs()
    const diffDays = todayDate.diff(lmpDate, 'day')
    return Math.floor(diffDays / 7)
})

const pregnancyDays = computed<number>(() => {
    if (!props.formData.lastMenstrualPeriod) return 0

    const lmpDate = dayjs(props.formData.lastMenstrualPeriod)
    const todayDate = dayjs()
    const diffDays = todayDate.diff(lmpDate, 'day')
    return diffDays % 7
})

// 计算预产期（末次月经+280天）
const calculatedDueDate = computed<string>(() => {
    if (!props.formData.lastMenstrualPeriod) return ''

    return dayjs(props.formData.lastMenstrualPeriod).add(280, 'day').format('YYYY-MM-DD')
})

// 计算宝宝月龄
const babyMonths = computed<number>(() => {
    if (!props.formData.birthDate) return 0

    const birthDate = dayjs(props.formData.birthDate)
    const todayDate = dayjs()
    const diffDays = todayDate.diff(birthDate, 'day')
    return Math.floor(diffDays / 30)
})

const babyDays = computed<number>(() => {
    if (!props.formData.birthDate) return 0

    const birthDate = dayjs(props.formData.birthDate)
    const todayDate = dayjs()
    const diffDays = todayDate.diff(birthDate, 'day')
    return diffDays % 30
})

// 格式化日期（用于摘要显示）
const formatDate = (dateString: string): string => {
    if (!dateString) return '';
    return dayjs(dateString).format('YYYY年MM月DD日');
}

// 进入首页
const enterHome = (): void => {
    emit('enter-home');
}
</script>

<style lang="scss" scoped>
.completion-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30rpx 0;
}

/* 摘要框样式 */
.summary-box {
    width: 100%;
    background-color: #f8f8f8;
    border-radius: 16rpx;
    padding: 30rpx;
    margin: 40rpx 0;
}

.summary-title {
    font-weight: bold;
    font-size: 32rpx;
    color: #333;
    margin-bottom: 20rpx;
    display: block;
}

.summary-content {
    font-size: 28rpx;
    color: #333;
}

.summary-item {
    display: flex;
    flex-direction: column;
}

.summary-line {
    margin-bottom: 10rpx;
    display: block;
}

.summary-note {
    font-size: 26rpx;
    color: #777;
    margin-top: 20rpx;
    display: block;
}

/* 自定义按钮 */
.custom-button {
    width: 100%;
    height: 90rpx;
    background-color: var(--color-primary, #ff9fb5);
    color: #ffffff;
    font-size: 32rpx;
    font-weight: 500;
    border-radius: 45rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40rpx;
    border: none;
}
</style> 